<template>
	<view class="identification">
		<welcome @toIdentifition='toIdentifition' v-if='welcomeFlage'></welcome>
		<view v-if='!welcomeFlage'>
			<view class="info">
				<view class="base_box">
					<view class="rows" v-for="(i,j) in infoList" :key='j'>
						<view class="name">
							{{i.name}}
						</view>
						<input type="text" v-model="i.value" :placeholder="i.placeholder" class="ipt"
							:disabled='i.disabled' placeholder-style="color:#C7C7C7;" />
					</view>
				</view>
			</view>
			<view class="upload_idcard">
				<view class="title">
					——— 请拍摄或上传 ———
				</view>
				<view>
					身份证照片
				</view>
				<view class="phone_box">
					<view class="idcard_img" :style='{backgroundImage: "url("+IMGLink+"/my/font.png)"}'>
						<image :src="card.font" @click="chosefile(1)"></image>
					</view>
					<view class="idcard_img" :style='{backgroundImage: "url("+IMGLink+"/my/back.png)"}'>
						<image :src="card.back" @click="chosefile(2)"></image>
					</view>
				</view>
				<view>
					拍摄要求
				</view>
				<view class="require_boxs">
					<view class="item" v-for="(i,j) in list" :key='j'>
						<image :src="i.img" mode="widthFix" class="img"></image>
						<image :src="i.icon" mode="widthFix" class="icon"></image>
						<view class="text">
							{{i.text}}
						</view>
					</view>
				</view>
				<view :class="infoFlag?'btn save_btn':' btn nosave_btn'" @click="infoFlag && toSave()">
					{{saveBtnText}}
				</view>
			</view>
		</view>
		<uni-popup ref="resultpop" type="center" :mask-click="false" :animation="false">
			<view class="result_box" :style="resultBg">
				<view class="text">
					{{resultText}}
				</view>
				<view class="btn result_btn" @click="closeBtn">
					{{resultTextBtn}}
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import welcome from './welcome.vue'
	import {
		luhnCheck,
		idCard,
		checkMobile
	} from './js/index.js'
	import {
		upload,
		fourelements,
		authenticationInfo,
		editfourelements
	} from '@/api/my/my.js'
	import {url_config} from '@/common/config.js';
	import copyFunc from "@/utils/userCommon.js";
	export default {
		data() {
			return {
				resultBg: '',
				resultText: '认证成功',
				resultTextBtn: '确定',
				IMGLink: this.IMGLink,
				infoList: [{
					name: '姓名',
					value: '',
					placeholder: '请输入您的姓名',
					disabled: false
				}, {
					name: '身份证号',
					value: '',
					placeholder: '请输入身份证号',
					disabled: false
				}, {
					name: '银行卡号',
					value: '',
					placeholder: '请输入银行卡储蓄卡号',
					disabled: false
				}, {
					name: '预留手机',
					value: '',
					placeholder: '请输入银行预留手机号',
					disabled: false
				}],
				info: {
					real_name: '',
					mobile: '',
					id_card: '',
					bank_card: '',
				},
				list: [{
					img: this.IMGLink + '/my/cardone.png',
					icon: this.IMGLink + '/my/right.png',
					text: '标准拍摄'
				}, {
					img: this.IMGLink + '/my/cardtwo.png',
					icon: this.IMGLink + '/my/error.png',
					text: '边框缺失'
				}, {
					img: this.IMGLink + '/my/cardthree.png',
					icon: this.IMGLink + '/my/error.png',
					text: '照片模糊'
				}, {
					img: this.IMGLink + '/my/cardfour.png',
					icon: this.IMGLink + '/my/error.png',
					text: '闪光强烈'
				}, ],
				card: {
					font: '',
					back: '',
				},
				infoFlag: false,
				indentifitionFlag: false,
				welcomeFlage: true,
				saveBtnText: '保存并上传',
				againShow: false
			}
		},
		watch: {
			infoList: {
				handler(news, old) {
					if (news[0].value && news[1].value && news[2].value && news[3].value) {
						this.info.real_name = news[0].value;
						this.info.id_card = news[1].value;
						this.info.bank_card = news[2].value;
						this.info.mobile = news[3].value;
						this.infoFlag = true
					} else {
						this.infoFlag = false;
					}
				},
				deep: true
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		components: {
			welcome
		},
		methods: {
			onLoad() {
				switch (this.userinfo.is_autherized) {
					case 0:
						this.welcomeFlage = true;
						break;
					case 1:
						this.welcomeFlage = false;
						this.authenticationInfo();
						break;
					default:
						break;
				}
			},
			toIdentifition() {
				this.welcomeFlage = false;
			},
			chosefile(data) {
				wx.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						wx.uploadFile({
							url: url_config + 'api/user_authentication/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'token': uni.getStorageSync('token')
							},
							success: (img) => {
								const imgData = JSON.parse(img.data).data.imgUrl;
								if (data == 1) {
									this.card.font = imgData;
								} else {
									this.card.back = imgData;
								}
							},
							complete: (res) => {
								console.log(res);
							}
						})
					},
					fail: res => {
						console.log(res);
					}
				})
			},
			toSave() {
				this.info.real_name = this.infoList[0].value;
				this.info.id_card = this.infoList[1].value;
				this.info.bank_card = this.infoList[2].value;
				this.info.mobile = this.infoList[3].value;

				if (!this.info.real_name) {
					this.$Toast.none('请输入姓名')
					return false;
				}
				if (this.userinfo.is_autherized == 0) {
					if (!idCard.checkIdcard(this.info.id_card)) {
						this.$Toast.none('请输入正确的身份证号')
						return false;
					}
				}
				if (!luhnCheck(this.info.bank_card)) {
					this.$Toast.none('请输入正确的银行卡号')
					return false;
				}
				if (!checkMobile(this.info.mobile)) {
					this.$Toast.none('请输入正确的银行预留手机号')
					return false;
				}
				if (!this.card.font || !this.card.back) {
					this.$Toast.none('请上传身份证照片')
					return false;
				}
				if (this.userinfo.is_autherized == 0) {
					this.fourelements();
				} else {
					this.editfourelements();
				}
			},
			closeBtn() {
				this.$refs.resultpop.close();
				if (this.userinfo.is_autherized == 0) {
					uni.navigateTo({
						url: '/pagesA/my/identification/editIdentifition'
					})
				} else {
					this.goBack()
				}
			},
			goBack() {
				copyFunc.goBack();
			},
			// toEmit() {
			// this.infoList.map((i, j) => {
			// 	i.disabled = false;
			// 	if (j == 3) {
			// 		i.name = '手机号';
			// 		i.value = this.info.mobile;
			// 		i.placeholder = '请输入银行预留手机号'
			// 	}
			// 	return i;
			// });
			// this.saveBtnText = '确定修改';
			// this.indentifitionFlag = false;
			// },
			async fourelements() {
				const res = await fourelements({
					real_name: this.info.real_name,
					mobile: this.info.mobile,
					id_card: this.info.id_card,
					bank_card: this.info.bank_card,
					idcard_img_front: this.card.font,
					idcard_img_back: this.card.back
				})
				if (res) {
					this.getInfo(res)
				}
			},
			async editfourelements() {
				const res = await editfourelements({
					mobile: this.info.mobile,
					bank_card: this.info.bank_card,
					idcard_img_front: this.card.font,
					idcard_img_back: this.card.back
				})
				if (res) {
					this.getInfo(res)
				}
			},
			getInfo(res) {
				this.resultBg = `background-image:url('${this.IMGLink}/my/sucessed.png');
				`;
				this.$refs.resultpop.open('center');
				this.$store.dispatch("updateUserInfo");
				// this.goBack();
			},
			async authenticationInfo() {
				const res = await authenticationInfo();
				if (res) {
					this.info = Object.assign(this.info, res.data)
					this.infoList[0].value = res.data.real_name;
					this.infoList[1].value = res.data.id_card;
					this.infoList[2].value = res.data.bank_card;
					this.infoList[3].value = res.data.mobile;
					res.data.auth_num == 1 ? this.againShow = true : this.againShow = false;
					this.userinfo.is_autherized == 1 ? this.saveBtnText = '确定修改' : '';
					this.card.font = res.data.idcard_img_front;
					this.card.back = res.data.idcard_img_back;
					this.infoList.map((i,j)=>{
						if(this.userinfo.is_autherized==1 && (j==0 || j==1)){
							i.disabled=true;
						}
						return i;
					})
				
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import './css/identification.css';

	.identification {
		color: #6A6A6A;
		font-size: 30rpx;
		line-height: 42rpx;

		.upload_idcard {
			border-top: 12rpx solid #F1F1F1;
			padding: 40rpx;

			.title {
				text-align: center;
				color: #5A5A5A;
				margin-bottom: 10rpx;
			}

			.phone_box {
				margin: 22rpx 0 40rpx 0;
				display: flex;
				justify-content: space-between;

				.idcard_img {
					width: 328rpx;
					height: 210rpx;
					background-size: 100% auto;
					background-repeat: no-repeat;

					image {
						width: 328rpx;
						height: 210rpx;
						margin-right: 8rpx;
					}
				}

			}

			.require_boxs {
				margin: 22rpx 0 78rpx 0;
				display: flex;

				.item {
					width: 160rpx;
					margin-right: 8rpx;

					.img {
						width: 160rpx;
					}

					.icon {
						width: 20rpx;
						margin: 18rpx auto;
					}

					.text {
						font-size: 24rpx;
						text-align: center;
						line-height: 26rpx;
					}

				}
			}

			.save_btn {
				background: #990C10;
			}

			.nosave_btn {
				background: #818181;
			}
		}

		.info {
			padding: 40rpx 40rpx 0;
			font-size: 30rpx;
			color: #626262;

			.base_box {
				.rows {
					display: flex;
					border-bottom: 1px solid #f1f1f1;
					height: 112rpx;
					line-height: 116rpx;

					.name {
						width: 120rpx;
						margin-right: 88rpx;
					}

					.ipt {
						height: 116rpx;
					}

				}
			}
		}

		.result_box {
			width: 652rpx;
			height: 740rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.text {
				color: #343434;
				font-size: 66rpx;
				line-height: 68rpx;
				text-align: center;
				padding-top: 374rpx;
			}

			.result_btn {
				width: 530rpx;
				margin-top: 80rpx;
			}
		}

		.finish_box {
			padding: 40rpx;

			.tip {
				color: #626262;
				font-size: 26rpx;
				line-height: 36rpx;
			}

			.btn {
				margin-bottom: 30rpx;
			}
		}

	}
</style>
